<template>
  <div class="level-selector">
    <label>等级权重</label>
    <div class="buttons">
      <button
        v-for="(level,index) in levels"
        :key="level"
        :class="{ active: selectedLevel === level }"
        @click="selectLevel(level,index)"
      >
        {{ level }}
      </button>
    </div>
    <small>等级权重越大，等级越高</small>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

// 定义传出的事件
const emit = defineEmits(['update:level']);

// 数据定义
const levels = ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级'];
const selectedLevel = ref('一级');
let index=ref(1)
// 选择等级的方法
const selectLevel = (level,index) => {
  selectedLevel.value = level;
  index.value=index;
  emit('update:level', level,index);
};
</script>

<style scoped>
.level-selector {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.buttons button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}
.buttons button.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.buttons button:not(.active):hover {
  background-color: #f0f0f0;
}
small {
  color: #888;
  font-size: 0.8rem;
}
</style>